<template>
    <div class="Logoned-box">
        <div class="Logoned-nav">
            <van-nav-bar  left-text="返回" left-arrow   @click-left="onClickLeft"></van-nav-bar>
        </div>
        <div class="Logoned-main">
        <div class="Logoned-icon"><img src="../assets/myicon.jpg" alt=""></div>
        <div class="Logoned-name">南风北巷</div>
        <div class="collection" @click="Collection()">
            <div >我的收藏</div><div>></div>
        </div>
        <div class="message" @click="Message()">
            <div >消息中心</div><div>></div>
        </div>
        </div>
       <div class="Esc" @click="Esc()">退出登录</div>
    </div>
</template>

<script>
    import { Toast } from 'vant';

    export default {
        name:'Logoned',
        data(){
            return{

            }
        },

         components:{
            Toast,
        },

         methods:{
        onClickLeft() {
            this.$router.push({name: 'Home', params: {}});;      
        },
        Collection(){
           
            this.$router.push({name: 'Collection', params: {}});
        },

        Message(){
           
            this.$router.push({name: 'Message', params: {}});
        },

        Esc(){
            this.setCookie("","",-1);
            this.$router.push({name: 'Home', params: {}});
            Toast('退出成功');
        },

         setCookie(c_name,c_pwd,exdays){
                    var exdate = new Date(); //获取当前时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                
                window.document.cookie =
                    "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie =
                    "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
                

            },


        }
        
    }
</script>

<style lang="less" scoped>
    

    .Logoned-icon{
        margin: 20px auto;
        width: 80px;
        height: 80px;
        border-radius: 50%;
    }
    img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .Logoned-name{
        text-align: center;
        font-size: 20px;
        margin-bottom: 20px;
    }
    .collection{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 30px;
        border-top: 1px solid #dfdfdf;
        padding:15px;
        font-size: 18px;
        
    }
    .message{
        display: flex;
        justify-content: space-between; 
        align-items: center;
        height: 30px;
        border-top: 1px solid #dfdfdf;
        padding:15px;
        font-size: 18px;
        
    }

    .Esc{
        margin-top: 10px;
        color: red;
        font-size: 22px;
        background-color: #faf3f3;
        line-height: 80px;
        text-align: center;
        width: 100%;
        height: 80px;
       

    }

</style>